<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编写文章</title>
    <link rel="stylesheet" href="../include/css/index.css">
    <link href="../include/bootstrap-3.3.7-dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
    <script src="../include/tinymce/js/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>
    <script src="../include/tinymce/js/tinymce/tinymce.min.js"></script>
    <style>
        .public-btn {
            font-size: 12px;
            border-radius: 100px;
            padding: 6px 0;
            width: 100px;
            border: 1px solid #007bff
        }
        .left-btn {
            text-align: center;
            color: #007bff;
            margin-right: 14px;
            position: relative;
            display: inline-block;
            width: 130px
        }
        .left-btn input {
            position: absolute;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer
        }
         .left-btn:hover {
            background: #007bff;
            color: #fff;
            transition: all .5s
        }
    </style>
    <script>
  tinymce.init({
      language: 'zh_CN',
    selector: '#mytextarea',

    plugins: [ //配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste imagetools textcolor'
    ],
//工具框，也可自己随意配置
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',
    image_advtab: true,
    table_default_styles: {
        width: '100%',
         borderCollapse: 'collapse'
  },
      image_title: false, // 是否开启图片标题设置的选择，这里设置否
    automatic_uploads: true,
  images_upload_handler: (blobInfo, success, failure) => {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/uploader/');//第一个参数是请求方式，第二个参数是请求地址，我这里配置的是struts的action，如果是其他（PHP等）的可这样配置：xxx.php

        xhr.onload = function () {
            var json;
            if (xhr.status !== 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location !== 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    }
   });
  </script>
</head>
<body style="background-color: #f5f5f5">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1"
                    data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">旅游网</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/articleList/">景点文章</a></li>
                   <li><a href="/lovePhoto/">爱摄影</a></li>
                <li><a href="/GoodView/">好景推荐</a></li>
                <li><a href="#"></a></li>
            </ul>


            <ul class="nav navbar-nav navbar-right">
                {% if session.get('username')%}
                <li class="dropdown">
                  <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">{{session.get('username')}} <span class="caret"></span></a>
                  <ul class="dropdown-menu" style="text-align: center;">
                     {% if session.get('username') == 'admin'%}
                       <li><a  href="/edit/">发布</a></li>
                      {% endif %}
                      <li><a href="/zhuxiao/">注销</a></li>
                  </ul>
                </li>
                {% else %}
                <li><a href="/registerPage/">注册/登录</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div style="width: 1280px;margin: 0 auto;margin-top: 30px;">
<form action="/insertContent/" method="post">
        <div class="input-group">
          <div class="input-group-btn">
            <button aria-label="Bold" class="btn btn-default" type="button"><span class="glyphicon glyphicon-bold"></span></button>
            <!--<button aria-label="Italic" class="btn btn-default" type="button"><span class="glyphicon glyphicon-italic"></span></button>-->
          </div>
          <input aria-label="Text input with multiple buttons" class="form-control" name="title" type="text" value="{{data['title']}}" placeholder="请输入标题">
        </div><!-- /.input-group -->
    <br/>
    <textarea id="mytextarea" name="content" style="height: 400px">{{data['content']}}</textarea>
    <input class="public-btn left-btn" type="submit" value="上传文章" style="float: right;margin-top: 10px">
  </form>
    </div>
<script src="../include/js/jquery3.4.1.js"></script>
<script src="../include/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../include/js/footer.js"></script>
<!--<div id="footer">-->
    <!--<p style="width: 100%;line-height: 100px;color: whitesmoke">12345</p>-->
<!--</div>-->

</body>
</html>